<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .success { background: #d4edda; color: #155724; }
        .error { background: #f8d7da; color: #721c24; }
        .warning { background: #fff3cd; color: #856404; }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        pre {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔧 EndoSight UC 系统测试页面</h1>

        <div id="status"></div>

        <h2>📋 系统组件测试</h2>
        <button onclick="testBackend()">测试后端API</button>
        <button onclick="testFrontend()">测试前端应用</button>
        <button onclick="testNetwork()">测试网络连接</button>

        <h2>📊 测试结果</h2>
        <div id="results"></div>

        <h2>🔗 快速访问链接</h2>
        <ul>
            <li><a href="http://localhost:4000/api/health" target="_blank">后端API健康检查</a></li>
            <li><a href="http://localhost:8106" target="_blank">前端Vue应用</a></li>
            <li><a href="http://localhost:5001" target="_blank">AI推理服务 (如果运行)</a></li>
        </ul>
    </div>

    <script>
        const status = document.getElementById('status');
        const results = document.getElementById('results');

        function addStatus(message, type = 'info') {
            const div = document.createElement('div');
            div.className = `status ${type}`;
            div.textContent = message;
            status.appendChild(div);
        }

        function addResult(title, content) {
            const section = document.createElement('div');
            section.innerHTML = `
                <h3>${title}</h3>
                <pre>${JSON.stringify(content, null, 2)}</pre>
            `;
            results.appendChild(section);
        }

        async function testBackend() {
            addStatus('正在测试后端API...', 'warning');
            try {
                const response = await fetch('http://localhost:4000/api/health');
                const data = await response.json();

                if (response.ok && data.success) {
                    addStatus('✅ 后端API测试成功', 'success');
                    addResult('后端API响应', data);
                } else {
                    addStatus('❌ 后端API响应异常', 'error');
                    addResult('后端API错误', { status: response.status, data });
                }
            } catch (error) {
                addStatus(`❌ 后端API连接失败: ${error.message}`, 'error');
                addResult('后端连接错误', { message: error.message, stack: error.stack });
            }
        }

        async function testFrontend() {
            addStatus('正在测试前端应用...', 'warning');
            try {
                const response = await fetch('http://localhost:8106');
                const html = await response.text();

                if (response.ok) {
                    addStatus('✅ 前端应用响应成功', 'success');
                    addResult('前端应用信息', {
                        status: response.status,
                        headers: Object.fromEntries(response.headers.entries()),
                        htmlLength: html.length,
                        hasVueApp: html.includes('id="app"'),
                        hasVite: html.includes('vite/client')
                    });
                } else {
                    addStatus('❌ 前端应用响应异常', 'error');
                    addResult('前端响应错误', { status: response.status, html: html.substring(0, 500) });
                }
            } catch (error) {
                addStatus(`❌ 前端应用连接失败: ${error.message}`, 'error');
                addResult('前端连接错误', { message: error.message, stack: error.stack });
            }
        }

        async function testNetwork() {
            addStatus('正在测试网络连接...', 'warning');
            const tests = [
                { name: '后端API', url: 'http://localhost:4000' },
                { name: '前端应用', url: 'http://localhost:8106' },
                { name: 'AI推理服务', url: 'http://localhost:5001' }
            ];

            for (const test of tests) {
                try {
                    const start = Date.now();
                    const response = await fetch(test.url, { method: 'HEAD' });
                    const time = Date.now() - start;

                    if (response.ok) {
                        addStatus(`✅ ${test.name}连接成功 (${time}ms)`, 'success');
                    } else {
                        addStatus(`⚠️ ${test.name}响应状态: ${response.status} (${time}ms)`, 'warning');
                    }
                } catch (error) {
                    addStatus(`❌ ${test.name}连接失败: ${error.message}`, 'error');
                }
            }
        }

        // 页面加载时自动运行测试
        window.onload = function() {
            addStatus('🚀 系统测试页面加载完成', 'success');
            setTimeout(() => {
                testBackend();
                setTimeout(() => testFrontend(), 1000);
                setTimeout(() => testNetwork(), 2000);
            }, 500);
        };
    </script>
</body>
</html>